<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display属性与盒模型详解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .description {
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }

        .section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .section-title {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        .comparison {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }

        .box {
            padding: 15px;
            border: 2px solid #3498db;
            border-radius: 5px;
            background: #f8f9fa;
            flex: 1;
            min-width: 250px;
        }

        .box-title {
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }

        .example {
            margin: 15px 0;
            padding: 15px;
            border: 1px dashed #ddd;
            border-radius: 5px;
        }

        .example-element {
            margin: 10px 0;
            padding: 10px;
            background: #e8f4fc;
            border: 1px solid #3498db;
            border-radius: 4px;
        }

        .inline-example span {
            margin: 0 5px;
            padding: 5px 10px;
            background: #e8f4fc;
            border: 1px solid #3498db;
            border-radius: 4px;
        }

        .flex-container {
            display: flex;
            gap: 10px;
            padding: 15px;
            background: #f0f8ff;
            border: 1px solid #3498db;
            border-radius: 5px;
            margin: 15px 0;
        }

        .flex-item {
            padding: 10px;
            background: #3498db;
            color: white;
            border-radius: 4px;
            text-align: center;
            flex: 1;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 15px;
            background: #f0f8ff;
            border: 1px solid #3498db;
            border-radius: 5px;
            margin: 15px 0;
        }

        .grid-item {
            padding: 10px;
            background: #3498db;
            color: white;
            border-radius: 4px;
            text-align: center;
        }

        .box-model-demo {
            margin: 20px auto;
            width: 300px;
            padding: 20px;
            border: 10px solid #3498db;
            background: #e8f4fc;
            position: relative;
        }

        .content-box {
            background: #fff;
            padding: 20px;
            border: 1px dashed #333;
            text-align: center;
        }

        .box-model-label {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 6px;
            border-radius: 3px;
            font-size: 12px;
        }

        .margin-label {
            top: -30px;
            left: 130px;
            background: #f1c40f;
            color: #333;
        }

        .border-label {
            top: 40px;
            right: -50px;
            background: #3498db;
        }

        .padding-label {
            top: 90px;
            right: -50px;
            background: #2ecc71;
        }

        .content-label {
            top: 140px;
            right: -50px;
            background: #e74c3c;
        }

        .code-block {
            background: #2d3436;
            color: #f5f6fa;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 15px 0;
            font-family: 'Consolas', monospace;
            line-height: 1.5;
        }

        .comment {
            color: #dfe6e9;
            opacity: 0.8;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .comparison {
                flex-direction: column;
            }

            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>CSS Display属性与盒模型详解</h1>
            <p class="description">探索不同display属性值和盒模型之间的区别</p>
        </header>

        <div class="section">
            <h2 class="section-title">CSS Display属性</h2>
            <p>Display属性定义元素如何显示在页面上，是CSS布局的基础。</p>

            <div class="comparison">
                <div class="box">
                    <h3 class="box-title">Block（块级元素）</h3>
                    <ul>
                        <li>占据父元素的全部宽度</li>
                        <li>总是在新行上开始</li>
                        <li>可以设置宽度和高度</li>
                        <li>默认包含外边距、内边距和边框</li>
                    </ul>
                    <div class="example">
                        <div class="example-element">这是一个div元素（block）</div>
                        <div class="example-element">另一个div元素</div>
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 块级元素示例 */</span><br>
                        div {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: block;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;margin: 10px 0;<br>
                        }
                    </div>
                </div>

                <div class="box">
                    <h3 class="box-title">Inline（行内元素）</h3>
                    <ul>
                        <li>只占据必要的宽度</li>
                        <li>不会在新行上开始</li>
                        <li>不能设置宽度和高度</li>
                        <li>垂直方向的内外边距和边框不影响布局</li>
                    </ul>
                    <div class="example inline-example">
                        这是一段文本，<span>行内元素1</span>和<span>行内元素2</span>在其中显示。
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 行内元素示例 */</span><br>
                        span {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: inline;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;padding: 5px 10px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;background: #e8f4fc;<br>
                        }
                    </div>
                </div>

                <div class="box">
                    <h3 class="box-title">Inline-Block（行内块元素）</h3>
                    <ul>
                        <li>像行内元素一样流动</li>
                        <li>但可以设置宽度和高度</li>
                        <li>垂直方向的内外边距和边框会影响布局</li>
                        <li>常用于创建水平菜单等项目</li>
                    </ul>
                    <div class="example inline-example">
                        <span style="display: inline-block; width: 80px; height: 40px;">元素1</span>
                        <span style="display: inline-block; width: 100px; height: 40px;">元素2</span>
                        <span style="display: inline-block; width: 120px; height: 40px;">元素3</span>
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 行内块元素示例 */</span><br>
                        .inline-block {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;width: 100px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;height: 40px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;margin: 5px;<br>
                        }
                    </div>
                </div>
            </div>

            <div class="comparison">
                <div class="box">
                    <h3 class="box-title">Flex（弹性盒子）</h3>
                    <ul>
                        <li>一维布局模型</li>
                        <li>子元素可以灵活调整大小</li>
                        <li>可以轻松实现对齐和分布空间</li>
                        <li>适用于响应式设计</li>
                    </ul>
                    <div class="flex-container">
                        <div class="flex-item">项目1</div>
                        <div class="flex-item">项目2</div>
                        <div class="flex-item">项目3</div>
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 弹性盒子示例 */</span><br>
                        .container {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: flex;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-between;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;align-items: center;<br>
                        }
                    </div>
                </div>

                <div class="box">
                    <h3 class="box-title">Grid（网格布局）</h3>
                    <ul>
                        <li>二维布局系统</li>
                        <li>可以同时控制行和列</li>
                        <li>提供精确的元素位置控制</li>
                        <li>适用于复杂布局</li>
                    </ul>
                    <div class="grid-container">
                        <div class="grid-item">项目1</div>
                        <div class="grid-item">项目2</div>
                        <div class="grid-item">项目3</div>
                        <div class="grid-item">项目4</div>
                        <div class="grid-item">项目5</div>
                        <div class="grid-item">项目6</div>
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 网格布局示例 */</span><br>
                        .container {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: grid;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: repeat(3, 1fr);<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;gap: 10px;<br>
                        }
                    </div>
                </div>

                <div class="box">
                    <h3 class="box-title">None（隐藏元素）</h3>
                    <ul>
                        <li>元素不会被显示</li>
                        <li>不占据任何空间</li>
                        <li>与visibility: hidden不同（后者占据空间）</li>
                        <li>常用于动态显示/隐藏内容</li>
                    </ul>
                    <div class="example">
                        <div class="example-element">可见元素</div>
                        <div class="example-element" style="display: none;">隐藏元素（display: none）</div>
                        <div class="example-element">另一个可见元素</div>
                    </div>
                    <div class="code-block">
                        <span class="comment">/* 隐藏元素示例 */</span><br>
                        .hidden {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;display: none;<br>
                        }
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">CSS盒模型</h2>
            <p>CSS盒模型描述元素在页面中占据的空间，由内容、内边距、边框和外边距组成。</p>

            <div class="box-model-demo">
                <div class="content-box">
                    内容区域
                </div>
                <div class="box-model-label margin-label">外边距 (Margin)</div>
                <div class="box-model-label border-label">边框 (Border)</div>
                <div class="box-model-label padding-label">内边距 (Padding)</div>
                <div class="box-model-label content-label">内容 (Content)</div>
            </div>

            <div class="comparison">
                <div class="box">
                    <h3 class="box-title">Content-Box（默认）</h3>
                    <ul>
                        <li>width和height只包括内容区域</li>
                        <li>内边距和边框会增加元素的总宽度和高度</li>
                        <li>传统盒模型，但不太直观</li>
                    </ul>
                    <div class="code-block">
                        <span class="comment">/* 内容盒模型 */</span><br>
                        .element {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;box-sizing: content-box;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;padding: 20px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;border: 5px solid #3498db;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;margin: 10px;<br>
                        }<br>
                        <span class="comment">/* 总宽度 = 200px + 40px + 10px = 250px */</span>
                    </div>
                </div>

                <div class="box">
                    <h3 class="box-title">Border-Box（推荐）</h3>
                    <ul>
                        <li>width和height包括内容、内边距和边框</li>
                        <li>更直观，更容易控制元素尺寸</li>
                        <li>设置width后，元素总宽度就是width值</li>
                    </ul>
                    <div class="code-block">
                        <span class="comment">/* 边框盒模型 */</span><br>
                        .element {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;width: 200px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;padding: 20px;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;border: 5px solid #3498db;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;margin: 10px;<br>
                        }<br>
                        <span class="comment">/* 总宽度 = 200px (内容+内边距+边框) + 20px = 220px */</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">实际应用示例</h2>
            <p>下面的示例展示了不同display值和盒模型的组合效果：</p>

            <div class="example">
                <h3>默认盒模型 (content-box)</h3>
                <div
                    style="box-sizing: content-box; width: 300px; padding: 20px; border: 5px solid #3498db; margin: 10px; background: #e8f4fc;">
                    这个div使用content-box，总宽度 = 300px + 40px + 10px = 350px
                </div>

                <h3>边框盒模型 (border-box)</h3>
                <div
                    style="box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid #3498db; margin: 10px; background: #e8f4fc;">
                    这个div使用border-box，总宽度 = 300px + 20px = 320px
                </div>
            </div>

            <div class="code-block">
                <span class="comment">/* 推荐使用border-box全局设置 */</span><br>
                *, *::before, *::after {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;<br>
                }<br>
                <br>
                <span class="comment">/* 这样所有元素都会使用更直观的盒模型 */</span>
            </div>
        </div>

        <div class="footer">
            <p>CSS Display属性与盒模型详解 &copy; 2023</p>
        </div>
    </div>
</body>

</html>